<template>
  <div>
    <div class="warnningTip">展示设置的全部投放计划</div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <el-button type="primary" class="mb20" @click="handleEdit">{{
      translate("add")
    }}</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="计划ID"
        min-width="80"
        prop="id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="计划标题"
        min-width="140"
        prop="name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="视频标题"
        min-width="120"
        prop="videoTitle"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="视频话题"
        min-width="120"
        prop="videoTopic"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="投放账号"
        min-width="80"
        prop=""
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span>{{ scope.row.publishNum }}个</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('rwzt')"
        min-width="80"
        prop=""
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.taskStatus == '0'">{{
            translate("underway")
          }}</span>
          <span v-if="scope.row.taskStatus == '1'">已完成</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="任务数据"
        min-width="120"
        prop=""
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <div>投放总数：{{ scope.row.allNum }}</div>
          <div>投放成功：{{ scope.row.finishNum }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="最后投放时间"
        min-width="160"
        prop="lastTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('createTime')"
        min-width="160"
        prop="createTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="计划状态"
        width="80"
        prop="status"
        show-overflow-tooltip
        fixed="right"
      >
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="1"
            inactive-value="0"
            @change="(e) => changeStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('handle')"
        width="200"
        prop=""
        fixed="right"
      >
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button type="text" @click="handleDetail(scope.row)">{{
              translate("ckxq")
            }}</el-button>
            <el-button
              v-if="scope.row.status == '0'"
              type="text"
              @click="handleEdit(scope.row)"
              >{{ translate("edit") }}</el-button
            >
            <el-button type="text" class="red" @click="handleDel(scope.row)">{{
              translate("del")
            }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
    <Delivery
      v-if="isOpenPub"
      ref="ShareRef"
      @close="isOpenPub = false"
      @success="getList"
    />
    <Detail v-if="isShowDetail" ref="DetailRef" />
  </div>
</template>

<script>
import {
  launchListPost,
  launchHandlePost,

  DyPublishDetail,
  DyPublishDel,
  momVideoList,
  momSiteList,
  DyImpowerUploadVideo,
  DyImpowerUploadPhoto
} from '@/api'
import { Loading } from 'element-ui'
import Delivery from './Delivery.vue'
import Detail from './DeliveryDetail.vue'
export default {
  components: {
    Delivery,
    Detail
  },
  data() {
    return {
      isShowDetail: false,
      filters: {},
      pagination: {
        rows: 10,
        page: 1
      },
      list: [],
      totalCount: 0,
      listLoading: false,
      videoProgress: 0,
      isShowProgress: false,

      isOpenPub: false,
      param: {},

      isOpenSelVideo: false,
      filtersSel: {},
      videoList: [],
      videoTotalCount: 0,
      paginationVideo: {
        rows: 10,
        page: 1
      },
      siteList: [],

      modalDialog: this.$store.state.app.dialog,
      queryFormConfig: {
        formItems: [
          {
            filed: 'name',
            type: 'input',
            label: '计划标题'
          },
          {
            filed: 'taskStatus',
            type: 'select',
            label: '任务状态',
            options: [
              { label: this.translate('underway'), value: '0' },
              { label: '已完成', value: '1' }
            ]
          },
          {
            filed: 'selDate',
            type: 'daterange',
            label: this.translate('createTime'),
            placeholder: '开始时间-结束时间'
          }
        ],
        online: true
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    videoBefore() {
      this.videoProgress = 0
      this.isShowProgress = true
    },
    videoUploadPro(e, file, files) {
      this.videoProgress = e.percent
      // console.log('videoProgress', e)
      // console.log('e', e)
      // console.log('file', file)
      // console.log('files', files)
    },
    radioVideoChange(v) {
      const loadingInstance = Loading.service({
        target: 'dialog_modal',
        text: '正在上传至抖音服务器......'
      })
      this.isShowProgress = true
      DyImpowerUploadVideo({ param: { userId: sessionStorage.getItem('userId'), mediaPath: v } }).then(res => {
        if (res.errorCode !== '000000') return
        this.isShowProgress = false
        this.$set(this.param, 'videoPath', v)
        this.$set(this.param, 'videoId', res.record)
        this.isOpenSelVideo = false
        loadingInstance.close()
      }, () => {
        this.isShowProgress = false
        loadingInstance.close()
      })
    },
    UploadSuccess(e, str) {
      if (str === 'videoPath') {
        DyImpowerUploadVideo({ param: { userId: sessionStorage.getItem('userId'), mediaPath: e.showUrl } }).then(res => {
          if (res.errorCode !== '000000') return
          this.isShowProgress = false
          this.$set(this.param, str, e.showUrl)
          this.$set(this.param, 'videoId', res.record)
        }, () => {
          this.isShowProgress = false
        })
      } else {
        DyImpowerUploadPhoto({ param: { userId: sessionStorage.getItem('userId'), mediaPath: e.showUrl } }).then(res => {
          if (res.errorCode !== '000000') return
          this.$set(this.param, str, e.showUrl)
          this.$set(this.param, 'videoCoverId', res.record)
        })
      }
    },
    handleDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.DetailRef.isShowModal = true
        this.$refs.DetailRef.getDetail(row.id)
      })
    },
    handleDel(row) {
      this.$confirm('是否删除该计划吗？', this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel')
      }).then(() => {
        launchHandlePost({ param: { id: row.id, type: '1' } }).then(res => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.translate('delScs'))
          this.getList()
        })
      })
    },
    changeStatus(row) {
      launchHandlePost({ param: { id: row.id, type: '0', status: row.status } }).then(res => {
        if (res.errorCode !== '000000') return
        this.$message.success('状态更新成功')
        this.getList()
      }, () => {
        this.getList()
      })
    },
    deleteDeviceConfigAddImage(str) {
      this.$set(this.param, str, '')
    },
    handleEdit(row) {
      this.isOpenPub = true
      this.$nextTick(() => {
        this.$refs.ShareRef.isShowModal = true
        if (row && row.id) {
          this.$refs.ShareRef.getDetail(row.id)
        }
      })
    },
    handleOpenSel() {
      this.isOpenSelVideo = true
      this.getSite()
      this.getListSel()
    },
    getList() {
      const { filters, pagination } = this
      this.listLoading = true
      if (filters.selDate && filters.selDate.length > 0) {
        filters.startTime = filters.selDate[0]
        filters.endTime = filters.selDate[1]
      } else {
        filters.startTime = null
        filters.endTime = null
      }
      launchListPost({ param: filters, pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    getListSel(page) {
      const { filtersSel, paginationVideo } = this
      paginationVideo.page = page || paginationVideo.page
      if (filtersSel.selTime && filtersSel.selTime.length > 0) {
        filtersSel.beginTime = filtersSel.selTime[0]
        filtersSel.endTime = filtersSel.selTime[1]
      } else {
        filtersSel.beginTime = null
        filtersSel.endTime = null
      }
      momVideoList({ param: filtersSel, pagination: paginationVideo }).then(res => {
        this.videoList = res.recordList || []
        this.videoTotalCount = res.totalCount
      }, () => {
      })
    },
    getSite() {
      momSiteList({ param: {} }).then(res => {
        this.queryFormConfigSel.formItems[0].options = res.recordList || []
      })
    },
    handleQuery() {
      this.pagination.page = 1
      this.getList()
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    },
    clearSel() {
      this.filtersSel = {}
      this.getListSel(1)
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    },
    videoPageSizeChange(val) {
      this.paginationVideo.rows = val
      this.getListSel()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.selList {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 200px;
    margin: 20px;
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.device-uploader2 {
  width: 160px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
</style>
